<script setup lang="ts">
import {TeamType} from "../models/team";
import {computed, onMounted, ref} from "vue";
import requestApi from "../plugins/requestApi.ts";
import {showFailToast, showSuccessToast, showToast, Toast} from "vant";
import {useRoute, useRouter} from "vue-router";
import {stringify} from "qs";
const now = new Date();
const team = ref<TeamType>({
  id: '',
  name: '',
  description: '',
  maxNum: '',
  expireTime:undefined,
  status: '0',
  password: '',
});
const router = useRouter();
const showPicker = ref(false);
const route = useRoute();
// 计算属性，格式化日期为 yyyy-MM-dd
const formattedExpireTime = (data)=>{
  if (data) {
    const date = new Date(data);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
  }
  return '';
}
onMounted(async ()=>{
  const res = await requestApi.get( '/team/getTeamById',{
    params:{
      teamId:route.query.teamId
    }
  })
  if (res){
    team.value = res;
    team.value.status = res.status.toString();
    team.value.expireTime = formattedExpireTime(res.expireTime);
  }else {
    showFailToast('获取队伍信息失败');
  }
})
const onConfirm = ({ selectedValues }) => {
  team.value.expireTime = selectedValues.join('-');
  showPicker.value = false;
};
const onSubmit = async () => {
  const res = await requestApi.post('/team/update', team.value)
  if(res){
    showSuccessToast("创建成功");
    router.back()
  }else {
    showFailToast('创建失败');
  }
};

</script>

<template>
  {{team}}
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
          v-model="team.name"
          name="name"
          label="队伍名"
          placeholder="请输入队伍名"
          :rules="[{ required: true, message: '请填写队伍名' }]"
      />

      <van-field
          v-model="team.description"
          rows="2"
          autosize
          label="队伍描述"
          type="textarea"
          maxlength="50"
          placeholder="请输入队伍描述"
          show-word-limit
      />
      <van-field
          v-model="team.expireTime"
          is-link
          readonly
          name="expireTime"
          label="过期时间"
          placeholder="点击选择时间"
          @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom">
        <van-date-picker :min-date="now" @confirm="onConfirm" @cancel="showPicker = false" />
      </van-popup>
      <van-field name="stepper" label="最大人数">
        <template #input>
          <van-stepper v-model="team.maxNum" max="10" min="3"/>
        </template>
      </van-field>
      <van-field name="radio" label="队伍状态">
        <template #input>
          <van-radio-group v-model="team.status" direction="horizontal">
            <van-radio name=0>公开</van-radio>
            <van-radio name=1>私有</van-radio>
            <van-radio name=2>加密</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
          v-if="team.status === '2'"
          v-model="team.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
    </van-cell-group>

    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        修改
      </van-button>
    </div>
  </van-form>
</template>

<style scoped>

</style>